<template>
  <div class="register-bd">
    <div class="card">

    <div class="register-right-side">
        <form class="registerForm">
          <h2 class="register-welcome-text" style="margin-bottom: 20px;">欢迎注册</h2>

<!--编辑部分-->
          <label for="username" class="registerLabel">用户名</label><br/><br/>
          <el-input v-model="username" placeholder="请输入用户名"></el-input>
          <br/><br/>

          <label for="password" class="registerLabel">密码</label><br/><br/>
          <el-input v-model="password" placeholder="请输入密码" show-password></el-input>
          <br/><br/>

          <label for="password" class="registerLabel">确认密码</label><br/><br/>
          <el-input v-model="repassword" placeholder="请再输一次" show-password></el-input>
          <br/><br/>

<!--提交按钮部分-->
          <p style="text-align:center">
            <el-button type="primary" @click="validateForm()" style="width: 400px;height: 50px;font-size: 20px;background-color:  #905a3a;border: none;margin-top: 20px">注册</el-button>
          </p>
<!--返回登录按钮部分-->
          <div style="text-align:center;font-size: 14px">
            已有账号？<router-link class="registerLink" to="/login">去登录</router-link>
          </div>
<!--验证条部分-->
          <Vcode :show="isShow" @success="success" @close="close"/>
        </form>
    </div>

    </div>
  </div>
</template>

<script>
import '../../css/register.css';
import Vcode from "vue-puzzle-vcode";
import store from "@/store";

export default {
  name: "register",
  data() {
    return {
      username: '',
      password: '',
      repassword: '',
      type:'1',


      isShow: false, // 验证码模态框是否出现

    };
  },
  components: {
    Vcode
  },
  methods: {
    validateForm() {
      if (this.username === '') {
        store.state.GLOBAL_MESSAGE = "用户名不能为空"
        store.state.YES="确定"
        store.state.IS_SHOW_MESSAGE = true;
        store.state.GLOBAL_MESSAGE_LINK = '/register'
        return;
      }
      if (this.password === '') {
        store.state.GLOBAL_MESSAGE = "密码不能为空"
        store.state.YES="确定"
        store.state.IS_SHOW_MESSAGE = true;
        store.state.GLOBAL_MESSAGE_LINK = '/register'
        return;
      }
      if (this.password !== this.repassword) {
        store.state.GLOBAL_MESSAGE = "两次密码不一致"
        store.state.YES="确定"
        store.state.IS_SHOW_MESSAGE = true;
        store.state.GLOBAL_MESSAGE_LINK = '/register'
        return;
      }
      // Display the captcha verification component
      this.isShow = true;
    },
    success() {
      this.isShow = false; // Hide the captcha verification component

      // 构造请求体数据
      const requestData = {
        username: this.username,
        password: this.password,
        type: this.type
      };

      // 发送请求
      fetch(this.$serviceIP + '/LoginRegister/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify(requestData)
      })
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! Status: ${response.status}`);
            }
            // 解析JSON响应数据
            return response.json();
          })
          .then(data => {
            console.log(data);//输出所有的服务端返回的data数据信息
            // 处理后端返回的数据
            if (data.code === '0') {
              // 通信成功，输出返回信息
              store.state.GLOBAL_MESSAGE = "注册成功,请登录"
              store.state.YES="去登录"
              store.state.IS_SHOW_MESSAGE = true;
              store.state.GLOBAL_MESSAGE_LINK = '/login'
              // 可以根据需要进行页面跳转等操作
            }
            else {
              //返回码是错误码（非0），显示错误消息即可
              this.$store.state.GLOBAL_COMMON_MESSAGE = data.msg;
              this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
            }

          })
          .catch(error => {
            // 处理网络请求错误
            console.error('Error:', error);
            this.$store.state.GLOBAL_COMMON_MESSAGE = '无法连接服务器';
            this.$store.state.IS_SHOW_COMMON_MESSAGE = true;
          });
    },


    close() {
      this.isShow = false; // Hide the captcha verification component if closed
    },
  },
};
</script>
